<template>
  <div class="app-nav left-menu-container" >
    <el-menu :default-active="activeNav">
      <template v-for="(menu, index) in menuList">
        <el-menu-item v-if="!menu.children" :index="menu.uri" :data="menu" :key="menu.id" @click="menuClick(menu, index)">
          <i :class="menu.icon"></i>
          <span slot="title">{{menu.name}}</span>
        </el-menu-item>
        <el-submenu v-if="menu.children" :index="menu.uri" :data="menu" :key="menu.id">
          <!-- <el-submenu v-if="menu.children" :index="menu.uri" :data="menu" :key="menu.id" :uri-data="menu.uri"> -->
          <template slot="title">
            <i :class="menu.icon"></i>
            <span> {{menu.name}}</span>
          </template>
          <el-menu-item-group class="custom-menu-item-group">
            <ul class="submenuThumb">
              <li v-for="submenu in menu.children" :key="submenu.id" :data-id="submenu.id" :data="submenu.uri"
                @click="submenuItemClickEvt(submenu, submenu.id, menu.uri)"
                class="custom-submenu-item"
                :style="submenuItemStyle">
                <!-- <i class="iconfont icon"></i> -->
                <span>{{submenu.name}}</span>
              </li>
            </ul>
          </el-menu-item-group>
          <!-- <app-nav :menu-list="menu.children"></app-nav> -->
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
import {getElementsByClass} from '@/utils/setMenu'
export default {
  name: 'AppNav',
  props: {
    menuList: {
      type: Array
    }
  },
  data () {
    return {
      activeNav: '',
      submenuItemStyle: {}
    }
  },
  created () {
  },
  mounted () {
    let m = this
    let submenuObj = getElementsByClass('el-submenu')
    let leftSubmenuObj = submenuObj[1]
    if (leftSubmenuObj) {
      let uri = leftSubmenuObj.getAttribute('uri-data')
      let levelOneSubmenu = leftSubmenuObj.childNodes[0]
      levelOneSubmenu.addEventListener('click', function () {
        m.$router.push({path: uri})
      })
    }
    // 刷新时以当前路由做为tab加入tabs
    if (this.$route.path !== '/modules') {
      let key = sessionStorage.getItem('currentClickMenuKey')
      // this.$store.commit('add_tabs', {route: '/modules', name: '模块首页'})
      this.$store.commit('add_tabs', {route: this.$route.path, name: this.$route.name, index: key})
      this.$store.commit('set_active_index', this.$route.path)
    } else {
      // this.$store.commit('add_tabs', {route: '/modules', name: '模块首页'})
      this.$store.commit('set_active_index', '/modules')
      // this.$router.push('/modules')
    }
    let routPath = this.$route.path
    this.activeNav = routPath
  },
  methods: {
    handleOpen (key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      // console.log(key, keyPath)
    },
    submenuItemClickEvt (menu, id, uri) {
      this.$router.push({path: menu.uri})
      sessionStorage.setItem('currentSubmenClickMenuId', id)
      let doms = document.getElementsByTagName('ul')
      let uls = []
      for (let i = 0; i < doms.length; i++) {
        if (doms[i].className === 'submenuThumb') {
          uls.push(doms[i])
        }
      }
      for (let k = 0; k < uls.length; k++) {
        for (let i = 0; i < uls[k].childNodes.length; i++) {
          let menuId = uls[k].childNodes[i].getAttribute('data')
          if (menuId === menu.uri) {
            uls[k].childNodes[i].style.backgroundColor = '#ecf5ff'
            uls[k].childNodes[i].style.color = 'rgb(64, 158, 255)'
          } else {
            uls[k].childNodes[i].style.backgroundColor = '#d9eafc'
            uls[k].childNodes[i].style.color = 'unset'
          }
        }
      }
    },
    menuClick (menu, key) {
      sessionStorage.removeItem('currentSubmenClickMenuId')
      let doms = document.getElementsByTagName('ul')
      let uls = []
      for (let i = 0; i < doms.length; i++) {
        if (doms[i].className === 'submenuThumb') {
          uls.push(doms[i])
        }
      }
      for (let k = 0; k < uls.length; k++) {
        for (let i = 0; i < uls[k].childNodes.length; i++) {
          let menuId = parseInt(uls[k].childNodes[i].getAttribute('data'))
          if (menuId !== parseInt(menu.id)) {
            uls[k].childNodes[i].style.backgroundColor = '#d9eafc'
            uls[k].childNodes[i].style.color = 'unset'
          }
        }
      }
      this.$router.push({path: menu.uri})
      this.$emit('saveCurrentClickStyle', menu)
      let name = menu.uri
      for (let i = 0; i < this.$store.state.options.length; i++) {
        if (name === this.$store.state.options[i].route) {
          let key = this.$store.state.options[i].index
          if (key) {
            sessionStorage.setItem('currentClickMenuKey', key)
          }
        }
      }
    }
  },
  computed: {
    options () {
      return this.$store.state.options
    }
  },
  watch: {
    '$route' (to) {
      let routPath = this.$route.path
      this.activeNav = routPath
    }
  }
}
</script>
<style scoped>
.app-nav {
  width: 100%;
  height: 100%;
  float: left;
}
.el-menu {
  background: none;
  border: none;
  height:100%
}
.el-menu-item.is-active {
  background-color:#ecf5ff
}
.custom-submenu-item{
  padding: 11px 0 11px 53px;
  cursor: pointer;
  background-color: #d9eafc;
  font-size: 14px;
}
.custom-submenu-item:hover{
  background-color: #ecf5ff;
}
</style>
<style>
.custom-menu-item-group .el-menu-item-group__title{
  padding: 0;
}
</style>
